{% include "header.html" %}

  <br />
  <div class="container">

    <h2>Predict data:</h2>

    <form action="/run_image_inference" method="post" enctype="multipart/form-data" >

        <div class="form-group row">
            <label for="inputEmail3" class="col-sm-2 col-form-label"><font color="red">*</font> Model Name </label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="model_name" value="default" required="required">
            </div>
        </div>

        <div class="form-group row">
            <label for="inputEmail3" class="col-sm-2 col-form-label"><font color="red">*</font> Model Version </label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="model_version" value="1" required="required">
            </div>
        </div>

        <div class="form-group row">
            <label for="inputEmail3" class="col-sm-2 col-form-label"><font color="red">*</font> Signature Name </label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="signature_name" value="serving_default" required="required">
            </div>
        </div>

        <div>
            <font color="red">*</font><span class="btn btn-default btn-file">Browse files <input type="file" name="image"></span>
        </div>

      <input type="submit" value="Submit" class="btn btn-primary">

    </form>

    <br />
    <h2>Predict image: </h2>
    <img src={{ image_file_path }} />

    <br />
    <h2>Predict result: </h2>
    <p>{{ predict_result }}</p>

  </div>

{% include "footer.html" %}
